.issue-token-link {
  &[href] {
    color: $blue-600;
  }

  &:hover,
  &:focus {
    outline: none;
    text-decoration: none;
  }
}

.issue-token-reference {
  margin-right: 1px;
  @apply gl-bg-subtle;
  transition: background $general-hover-transition-duration $general-hover-transition-curve, color $general-hover-transition-duration $general-hover-transition-curve;

  .issue-token:hover &,
  .issue-token-link:focus > & {
    @apply gl-bg-strong;
    color: $blue-800;
    text-decoration: none;
  }
}

.issue-token-title {
  @apply gl-bg-strong;
  transition: background $general-hover-transition-duration $general-hover-transition-curve;

  .issue-token:hover &,
  .issue-token-link:focus > & {
    background-color: $gray-100;
  }
}

.issue-token-remove-button {
  @apply gl-bg-strong;
  transition: background $general-hover-transition-duration $general-hover-transition-curve;

  &:hover,
  &:focus,
  .issue-token:hover &,
  .issue-token-link:focus + & {
    background-color: $gray-100;
    outline: none;
  }
}

.issue-realtime-pre-pulse {
  opacity: 0;
}

.issue-realtime-trigger-pulse {
  transition: opacity $fade-in-duration linear;
  opacity: 1;
}

ul.related-merge-requests > li gl-emoji {
  font-size: 1em;
}

.merge-request-status {
  &.merged {
    color: $blue-500;
  }

  &.closed {
    @apply gl-text-danger;
  }

  &.open {
    @apply gl-text-success;
  }
}

.merge-request,
.issue {
  &.closed,
  &.merged {
    @apply gl-bg-subtle;
  }
}

@include gl-container-width-down(sm, panel) {
  .detail-page-header {
    .issuable-meta {
      line-height: 18px;
    }
  }
}

.recaptcha {
  margin-bottom: 30px;
}

.new-branch-col {
  .discussion-filter-container {
    &:not(:last-child) {
      margin-right: $gl-spacing-scale-3;
    }
  }

  @include gl-container-width-down(sm, panel) {
    width: 100%;

    > div:not(:last-child) {
      margin-bottom: $gl-spacing-scale-3;
    }
  }
}

.create-mr-dropdown-wrap {
  .ref::selection {
    color: $gl-text-color-tertiary;
  }

  .dropdown {
    .dropdown-menu-toggle {
      min-width: 285px;
    }

    .dropdown-select {
      width: 285px;
    }
  }

  .btn-group:not(.hidden) {
    display: flex;

    @include gl-container-width-down(sm, panel) {
      .btn.btn-confirm {
        justify-content: flex-start;

        &.dropdown-toggle {
          flex-grow: 0;
        }
      }
    }
  }

  .js-create-merge-request {
    flex-grow: 1;
    flex-shrink: 0;
  }

  .create-merge-request-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: none;
    margin-top: 4px;
  }
}

.discussion-reply-holder,
.note-edit-form {
  display: block;
}

@include gl-container-width-up(sm, panel) {
  .emoji-block .row {
    display: flex;

    .new-branch-col {
      padding-bottom: 0;
      align-self: flex-end;
    }
  }

  .create-mr-dropdown-wrap {
    .btn-group:not(.hidden) {
      display: inline-flex;
    }
  }
}

@include gl-container-width-up(lg, panel) {
  .new-branch-col {
    text-align: right;
  }
}

.issue-sticky-header {
  left: var(--application-bar-left);
  right: var(--application-bar-right);
  width: auto;
  top: $calc-application-header-height;

  .right-sidebar-collapsed & {
    padding-right: $right-sidebar-collapsed-width;
  }

  .right-sidebar-expanded & {
    padding-right: $right-sidebar-width;
  }
}

// stylelint-disable-next-line gitlab/no-gl-class
.work-item-drawer .gl-drawer-header-sticky,
.issue-sticky-header {
  @include translucent-glass-background;
}

.limit-container-width {
  .issue-sticky-header-text {
    max-width: $limited-layout-width;
  }
}

.issue-sticky-header-text {
  padding: 0 $container-margin;

  @include gl-container-width-up(xl, panel) {
    padding: 0 $container-margin-xl;
  }
}

// These are composite classes for use with Vue Transition
// https://vuejs.org/guide/built-ins/transition
.issuable-header-slide-enter-active,
.issuable-header-slide-leave-active {
  @apply gl-transition-all;
}

.issuable-header-slide-enter,
.issuable-header-slide-leave-to {
  transform: translateY(-100%);
}

.issuable-sticky-header-visible {
  --issuable-sticky-header-height: 40px;
}

.md-header-preview {
  z-index: 1;
  position: sticky;
  // note: only either --work-item-sticky-header-height or
  // --issuable-sticky-header-height will be defined.
  // --issuable-sticky-header-height is maintained for incidents, all other
  // work items use --work-item-sticky-header-height.
  top: calc(#{$calc-application-header-height} + var(--work-item-sticky-header-height, 0px) + var(--issuable-sticky-header-height, 0px) - 2px);
  margin-left: 1px;
  @apply gl-bg-default;
}

.detail-page-description .md-header {
  top: $calc-application-header-height;
}

// stylelint-disable-next-line gitlab/no-gl-class
.gl-drawer .md-header {
  top: 0;
}

// stylelint-disable-next-line gitlab/no-gl-class
.gl-modal .md-header {
  top: -$gl-padding-8;
}

// Issue markdown header if no sticky header is present
.work-item-detail:not(:has(.issue-sticky-header)) .md-header {
  top: 0;
}
